<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 4 CSS内联样式 -->
    <style>
        *{
            font-size: 16pt;
        }

        div>p>span{
            color: red;
        }

        .active{
            /* color: red;
            font-size: 2em; */
        }
        li:hover{
            font-size: 2em;
            /* color: rebeccapurple; */
            /* color: rgb(248,19,120); */
            color: rgba(248,19,120,0.1);
        }

        li:hover~li{
            text-decoration: line-through;
        }

        input{
            /* display: none; */
        }
        input:checked+.in{
            right: 10px;
            transition: all 1s  ease-in   500ms;
            background-color: green;
        }

        .in{
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
            transition: all 1s  ease-in   500ms;
        }

   

    </style>
</head>
<body>
    <!-- 1  修饰页面的方式，不推荐 -->
     <!-- <b>粗体</b><i>斜体</i><font color="red">红色</font> -->
    <!-- 3  CSS的行内样式 ,  style属性="特性1:值1;特性2:值2" -->
    <!-- <h1 class="mytitle1">这是文章的标题</h1>
    
    <div class="mytitle1">
        <h1 style="font-size: 0.6em;text-align: center;font-weight: bold;letter-spacing: 20px;">诗的标题</h1>
        <h2 style="font-size: 0.3em;text-align: center;text-indent: 35%;">朝代 - 诗人</h2>
        <p>锄禾日当午,<br />汗滴禾下土。</p>
        <p>谁知盘中餐,<br />粒粒皆辛苦。</p>
    </div>



    <div>
        <p>这是段落</p>
        <p>这是<span>111111</span>另一段落</p>
    </div> -->
    <ul>
        <li>aaaaaa</li>
        <li class="active">bbbbbb</li>
        <li>cccccc</li>
        <li>dddddd</li>
        <li>eeeeee</li>
        <li>ffffff</li>
    </ul>

    <!-- <label>
        <input type="checkbox" value="1" />
        <span>阅读并同意该协议</span>
    </label> -->

    <label>
        <input type="checkbox" value="1" />
        <div class="in"></div>
    </label>
</body>
</html>